<template>
<view class="container">
  <view class="form-wrapper">
    <u-form ref="uForm" :model="form" label-width="160rpx">
      <u-form-item label="alpha邮箱" prop="email">
        <u-input v-model="form.email" placeholder="请输入alpha邮箱"/>
      </u-form-item>
      <u-form-item label="验证码" prop="code">
        <u-input type="number" v-model="form.code" placeholder="请输入验证码">
          <template slot="suffix">
            <u-code
                ref="uCode"
                @change="codeChange"
                seconds="60"
                changeText="X秒重新获取"
            ></u-code>
            <view class="btn" @click="getCode">{{tips}}</view>
          </template>
        </u-input>
      </u-form-item>
    </u-form>
    <view class="footer">
      <view class="btn-wrapper">
        <view :class="{ disabled }" class="btn-item btn-item-main" @click="handleSubmit()">保存</view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
export default {
  data() {
    return {
      form:{
        email:'',
        code:''
      },
      tips: '获取验证码',
      // 按钮禁用
      disabled: false
    };
  },
  methods: {
    codeChange(text) {
      this.tips = text;
    },
    //验证邮箱
    checkEmail(email){
      const reg = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      return reg.test(email);
    },
    getCode() {
      const app = this
      if(!app.form.email){
        app.$toast('请输入邮箱');
        return;
      }
      if(!app.checkEmail(app.form.email)){
        app.$toast('请输入正确的邮箱');
        return;
      }
      if (app.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        const params = {
          email: app.form.email
        }
        app.$request.post('wx/auth/sendVerifyCode',params,{load:false}).then(res=>{
          app.$toast('验证码已发送');
          app.$refs.uCode.start();
        }).catch(err=>{
          app.$toast(err.errmsg)
        }).finally(()=>{
          uni.hideLoading();
        })
      } else {
        app.$toast('倒计时结束后再发送');
      }
    },
    handleSubmit(){
      const app = this
      if (app.disabled) {
        return false
      }
      if(!app.form.email){
        app.$toast('请输入邮箱');
        return;
      }
      if(!app.checkEmail(app.form.email)){
        app.$toast('邮箱格式错误');
        return;
      }
      if(!app.form.code){
        app.$toast('请输入验证码');
        return;
      }
      app.disabled = true
      this.$request.post('wx/auth/bindThirdAcct',app.form).then(result => {
        this.$toast('绑定成功');
        setTimeout(()=>{
          uni.navigateBack({
            delta: 1
          });
        },1000)
      }).catch(err=>{
        this.$toast(err.errmsg)
      }).finally(()=>{
        app.disabled = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  background: #fff;
  .form-wrapper {
    margin: 20rpx auto 20rpx auto;
    padding: 0 32rpx;
    width: 100%;
    box-sizing: border-box;
    /deep/ .u-input{
      font-size: 32rpx;
      font-weight: 500;
      color: #242323;
      border-width: 0 !important;
    }
    .btn{
      padding: 12rpx 24rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #242323;
      border: solid 1px #242323;
      border-radius: 24rpx;
    }
  }
  .footer {
    margin-top: 80rpx;
    .btn-wrapper {
      height: 100%;
      // display: flex;
      // align-items: center;
      padding: 0 40rpx;
    }
    .btn-item {
      flex: 1;
      font-size: 28rpx;
      height: 86rpx;
      color: #fff;
      border-radius: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .btn-item-main {
      background: #1777FF;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
      border-radius: 10rpx;
      // 禁用按钮
      &.disabled {
        opacity: 0.6;
      }
    }
  }
}
</style>